<template>
     <div class="pageContent">
          <baseTable
               :totalCount="totalCount"
               :showpagination="showpagination"
               :listData="pageListData"
               @handleDeleteClick2="handleDeleteClick2"
               @handleEditClick2="handleEditClick2"
               @rowclick="rowclick"
               v-bind="contentConfig"
               v-model:page="pageInfo"
               :tableLoading="tableLoading"
               @selectionChange="selectionChange"
               :showHandle="showHandle"
               :pagetionLayout="pagetionLayout"
          >
               <template #headerHandler v-if="addBtnShow">
                    <slot name="btns"></slot>
               </template>
               <template #handler="scope">
                    <div class="btnBox">
                         <span title="编辑" v-if="editBtnShow">
                              <div
                                   class="btnClass primary noText small"
                                   @click="handleEditClick(scope.row)"
                              >
                                   <el-icon
                                        class="iconfont icon-bianji"
                                   ></el-icon>
                              </div>
                         </span>
                         <el-popconfirm
                              title="此操作将永久删除,是否继续?"
                              cancel-button-type="info"
                              @confirm="handleDeleteClick(scope.row)"
                              confirm-button-text="确定"
                              cancel-button-text="取消"
                              v-if="deleteBtnShow"
                         >
                              <template #reference>
                                   <span title="删除">
                                        <div
                                             class="btnClass danger noText small"
                                        >
                                             <i class="iconfont icon-shanchu" />
                                        </div>
                                   </span>
                              </template>
                         </el-popconfirm>
                    </div>
               </template>
               <template
                    v-for="item in otherPropSlots"
                    :key="item.prop"
                    #[item.slotName]="scope"
               >
                    <template v-if="item.slotName">
                         <slot :name="item.slotName" :row="scope.row"></slot>
                    </template>
               </template>
               <template
                    v-for="item in otherPropSlots2"
                    :key="item.prop"
                    #[item.slotName]="scope"
               >
                    <slot :name="item.slotName" :row="scope.row"></slot>
               </template>
          </baseTable>
     </div>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import baseTable from '@/baseUi/baseTable'
// import { inject } from 'vue'
import emitter from '@/utils/mitt'
import {
     defineProps,
     defineEmits,
     defineExpose,
     onMounted,
     onUnmounted,
} from 'vue'
const props = defineProps({
     contentConfig: {
          type: Object,
          required: true,
     },
     pageName: {
          type: String,
          required: true,
     },
     iftrue: {
          type: Boolean,
          required: false,
          default: false, // 添加默认值
     },
     objtotal: {
          type: Number,
          required: false,
          default: 0, // 添加默认值
     },
     nestingiframe: {
          type: String,
          required: false, // 修改为布尔值
     },
     addBtnShow: {
          type: Boolean,
          default: true,
     },
     tableLoading: {
          type: Boolean,
          default: false,
     },
     deleteBtnShow: {
          type: Boolean,
          default: true,
     },
     editBtnShow: {
          type: Boolean,
          default: true,
     },
     showHandle: {
          type: Boolean,
          default: true,
     },
     showpagination: {
          type: Boolean,
          default: true,
     },
     pagetionLayout: {
          type: String,
          default: 'total, sizes, prev, pager, next, jumper',
     },
})
const emit = defineEmits([
     'newBtnClick',
     'editBtnClick',
     'delBtnClick',
     'historicalBtnClick',
     'rowclick',
     'getTableList',
     'getSelectionData',
     'pageInfoChange',
])
const pageInfo = ref({
     pagesize: 10,
     offset: 1,
})
// 点击某一行
const rowclick = (val: any) => {
     emit('rowclick', val)
}

watch(
     pageInfo,
     () => {
          getPageData()
     },
     {
          deep: true,
     },
)
// 获取页面数据
const pageListData = ref([])
// 获取数据总条数
const totalCount = ref(0)
// const otherQueryInfo: any = ref({})
const modalConfig = ref({})
// 获取表格
// let tablebox = ref(null)
// console.log(tablebox.value,'tablebox')
// 获取数据
const showpagination = ref(props.showpagination)
const getPageData = (otherInfo: any = {}) => {
     emit('getTableList', { ...otherInfo, ...pageInfo.value })
}
const setTableData = (data: any, total: any) => {
     console.log(data, total, '获取数据')
     pageListData.value = data
     if (total || total === 0) {
          totalCount.value = total
     } else {
          showpagination.value = false
     }
}
// 剩余需要一级插槽
const otherPropSlots = computed(() => {
     if (!props.contentConfig?.propList) {
          return []
     }
     return props.contentConfig?.propList.filter((item: any) => {
          if (item.slotName === 'handler') return false
          if (item.children) return false
          return true
     })
})

function getAllChildren(tree: any, result: any = []) {
     for (const node of tree) {
          if (node.children) {
               result.push(...node.children)
               getAllChildren(node.children, result)
          }
     }
     return result
}
// 剩余需要二级插槽
const otherPropSlots2 = computed(() => {
     if (!props.contentConfig?.propList) {
          return []
     }

     const hasChlidrenArr = props.contentConfig?.propList.filter(
          (item: any) => {
               if (!item.children) return false
               return true
          },
     )
     const otherPropSlots2 = getAllChildren(hasChlidrenArr)
     return otherPropSlots2
})

// 删除数据
const handleDeleteClick = (rowItem: any) => {
     emit('delBtnClick', rowItem)
}
// 展开table数据删除
const handleDeleteClick2 = (rowItem: any) => {
     console.log(rowItem, 'rowItem1')
     console.log(props.pageName, rowItem.id, '删除')
     // Delete_Record(props.pageName, rowItem.id).then(() => {
     //   ElMessage({ message: '删除成功', type: 'success' })
     //   emit('delBtnClick')
     // })
}
// 新建数据
const handleNewData = (item: any = {}, istype: any = '') => {
     console.log('点击了新建数据', istype)
     if (istype) {
          item.istype = istype
     }
     emit('newBtnClick', item)
}
//编辑数据
const handleEditClick = (item: any) => {
     console.log(item, '编辑数据')
     emit('editBtnClick', item)
}
// 展开table编辑数据
const handleEditClick2 = (item: any) => {
     emit('editBtnClick', item)
}
//历史数据
// const handleHistoricalClick = (item: any) => {
//   emit('historicalBtnClick', item)
// }
const modalConfigobj = (item: any) => {
     // console.log(item,'获取的modalConfig')
     modalConfig.value = item
}
// 获取表格勾选数据
const selectionChange = (val: any) => {
     emit('getSelectionData', val)
}
onMounted(() => {
     emitter.on('modalConfig', modalConfigobj)
})
onUnmounted(() => {
     emitter.off('modalConfig')
})

defineExpose({
     setTableData,
     getPageData,
     pageInfo,
})
</script>

<style scoped lang="scss">
.pageContent {
     height: 100%;
}

.new-data {
     width: 70px;
     height: 30px;
     line-height: 30px;
     color: #409eff;
     border-radius: 5px;
     display: inline-block;
     text-align: center;
     cursor: pointer;
     border: 1px solid #409eff;

     .new-data-title {
          display: inline-block;
          vertical-align: top;
          margin-left: 3px;
          font-size: 12px;
     }
}
</style>
